<template>
  <div id="socialList">
    <div class="socialTitle clearfix">
      <div
        class="titleName fl"
        v-html="`企业列表(${totalNum}个)`"
      ></div>
      <div
        class="fr"
        v-show="global.powerAllBtn.qygl.qylbdcBtn"
      >
        <el-button
          round
          icon="el-icon-download"
          style="color:#0064e4;border-color:#0064e4"
          @click="importData()"
        >导出</el-button>
      </div>
    </div>
    <div class="searchBox">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="sform"
      >
        <!-- 企业列表下面的注册时间。 企业名称 。所在地区。 公司性质。 企业规模-->
        <div class="formItemBox">
          <el-form-item label="注册时间">
            <el-date-picker
              v-model="formInline.startdate"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width:140px"
            ></el-date-picker>~
            <el-date-picker
              v-model="formInline.enddate"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width:140px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="企业名称"
            prop="companyname"
            class="socialList-companyname-socialTitle"
          >
            <el-input
              v-model="formInline.companyname"
              placeholder="企业名称"
              style="width:217px"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="所在地区"
            prop="region"
          >
            <city-Cascader
              :citys="formInline.citys"
              :level="level"
              @handleChange="handleCityChange"
            ></city-Cascader>
          </el-form-item>
          <!-- <el-form-item label="所在地区" prop="citys">
            <el-cascader
              :options="cityList"
              v-model="formInline.citys"
              expand-trigger="hover"
              :props="casOption"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>-->
        </div>
        <div class="formItemBox">
          <el-form-item
            label="公司性质"
            prop="companytype"
            style="width: 368px;"
          >
            <el-select
              v-model="formInline.companytype"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.dictid"
                :label="item.dictname"
                :value="item.dictid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="企业规模"
            prop="companysize"
          >
            <el-select
              v-model="formInline.companysize"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in sizeList"
                :key="item.dictid"
                :label="item.dictname"
                :value="item.dictid"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 右边  的蓝色查询按钮 -->
          <el-form-item style="width:288px;text-align:right">
            <!-- <el-button @click="reset('sform')" class="searchBtn">重置</el-button> -->
            <!-- 点击查询 触发search这个方法 -->
            <el-button
              type="primary"
              @click="search(null)"
              class="searchBtn"
            >查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 企业名称等等   的列表 -->
    <div class="pd30">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
      >
        <el-table-column
          label="企业名称"
          align="center"
        >
          <!-- 点击了这个公司名称之后会弹出这个  check  的这个企业详情这个弹窗  传进去了这个  行  对象 -->
          <template slot-scope="scope">
            <el-button
              @click="checkInfo(scope.row)"
              type="text"
              size="small"
              class="tabel_cell"
            >{{scope.row.companyname}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="所在地区"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{scope.row.provincename}}-{{scope.row.cityname}}-{{scope.row.areaname}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="companytypename"
          label="公司性质"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="companysizename"
          label="企业规模"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalaccount"
          label="账户总额（元）"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="inserttime"
          label="注册时间"
          align="center"
        ></el-table-column>
		<el-table-column
		  label="平台合作"
		  align="center"
		>
			<template slot-scope="scope">
				<el-radio-group v-model="scope.row.isPlatformRecommend" @change="platformSelect(scope.row)">
				    <el-radio label="1">是</el-radio>
				    <el-radio label="0">否</el-radio>
				</el-radio-group>
				<!-- <el-radio v-model="radio" label="1">是</el-radio>
				<el-radio v-model="radio" label="0">否</el-radio> -->
			</template>
		</el-table-column>
        <el-table-column
          label="置顶企业"
          align="center"
        >
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.stick" @change="handStickChange(scope.row)">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
            </el-radio-group>
            <!-- <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="0">否</el-radio> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="pageBox">
      <!-- <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="cpage" :total="totalNum" @current-change="pageChange" :page-size="pageSize"></el-pagination> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="pageChange"
        :current-page="cpage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      ></el-pagination>
    </div>
    <!-- 详情弹框 -->
    <el-dialog
      :visible.sync="checkFlag"
      width="1040px"
      class="jhdialog"
    >
      <!-- 帮这个check  弹窗绑定  date 数据里面的公司名称  和  公司id  -->
      <!-- 应该是给这个 check  传了一个type  为0，tabnum为 4 ， 
            companyName为 info对象里的companyname ，companyId为info对象里的companyId
       -->
      <check
        v-if="checkFlag"
        :companyName="info.companyname"
        :companyId="info.companyid"
        :type="'0'"
        :tabNum="'4'"
      ></check>
    </el-dialog>
  </div>
</template>
<script>
//企业列表内引入了  check 这个页面    企业信息的弹窗
import check from "../socialCheck/check.vue";
import cityCascader from "../../../component/cityCascader/index.vue";
export default {
  name: "",
  components: {
    check,
    cityCascader
  },
  data () {
    return {
      formInline: {
        // time: "",
        startdate: "",
        enddate: "",
        companyname: "",
        companytype: "",
        companysize: "",
        citys: [],
        province: "",//省份编码
        city: '',//城市编码
        area: '',//区域编码
        pagenum: "1",
        pagesize: 10
      },
      // tableColumn: [
      //   { label: "企业名称", value: "companyname" },
      //   { label: "所在地区", value: "provincename-cityname-areaname" },
      //   { label: "公司性质", value: "companytypename" },
      //   { label: "企业规模", value: "companysizename" },
      //   { label: "注册时间", value: "inserttime" }
      // ],
      tableData: [],
      checkFlag: false,
      info: "",
      cityList: [],
      typeList: [],
      sizeList: [],
      casOption: {
        value: "code",
        label: "name",
        children: "subLevelModelList"
      },
      cpage: 1,
      pageSize: 10,
      totalNum: 0,
      level: "0",
      global: {}

    };
  },
  created () {
    // 直接拿到vue  原型上面的GLOBAL属性
    this.global = this.GLOBAL;
    // 打开网页直接刷新getAuthority这个方法
    this.getAuthority();
  },
  mounted () {
    this.getCity();
    this.getType();
    this.getSize();
    this.search();
  },
  methods: {
    // 获取所在地的省份，城市，区域
    getAuthority () {
      let userinfo = localStorage.getItem('userinfo');
      userinfo = JSON.parse(userinfo);
      this.level = userinfo.level;
      this.formInline.province = userinfo.province || '';
      this.formInline.city = userinfo.city || '';
      this.formInline.area = userinfo.area || '';
      this.formInline.citys = [];
      this.formInline.citys.push(+userinfo.province);
      this.formInline.citys.push(+userinfo.city);
      this.formInline.citys.push(+userinfo.area);
    },
    // 获取所在地区 查询条件的下拉列表
    getCity () {
      this.$http.get("assets/citys.json").then(res => {
        let temp = res.body.city;
        temp.forEach(el => {
          el.subLevelModelList.forEach(ele => {
            delete ele.subLevelModelList;
          });
        });
        this.cityList = temp;
      });
    },
    // 获取公司性质 查询条件的下拉列表
    getType () {
      this.$axios
        .post("/system/v1/common/dict", { groupid: "companytype" })
        .then(res => {
          if (res.data.message === "success.") {
            this.typeList = res.data.data;
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },
	// 平台合作选项更改
	platformSelect(data){
		console.log(data);
		let params ={
			companyid: data.companyid,
			isPlatFormRecommend: data.isPlatformRecommend
		}
		this.$axios.post('/app/v1/platform/company/updatePlatFormRecommend',params).then(res => {
			console.log(res);
			if(res.data.code === 1){
				this.$message.success('操作成功！');
			}else{
				this.$message.warning(res.data.message);
			}
		})
	},
  // 是否置顶
  handStickChange(row) {
    let params ={
			companyid: row.companyid,
			isPlatFormRecommend: row.isPlatformRecommend,
      stick: row.stick
		}
		this.$axios.post('/app/v1/platform/company/updatePlatFormRecommend',params).then(res => {
			console.log(res);
			if(res.data.code === 1){
				this.$message.success('操作成功！');
			}else{
				this.$message.warning(res.data.message);
			}
		})
  },
    // 获取公司规模 查询条件的下拉列表
    getSize () {
      this.$axios
        .post("/system/v1/common/dict", { groupid: "companysize" })
        .then(res => {
          if (res.data.message === "success.") {
            this.sizeList = res.data.data;
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },
    // 点击公司详情传进来的   r    是这个行对象，  然后把这个行对象  直接赋值给了这个date里面的   info  
    checkInfo (r) {
      this.checkFlag = true;
      this.info = r;
    },
    search (page) {
      // 查询的时候把筛选的页数也改成这个page
      this.formInline.pagenum = page || "1";
      let data = this.formInline;
      if (
        data.startdate &&
        data.enddate &&
        Date.parse(data.startdate) > Date.parse(data.enddate)
      ) {
        this.$message({
          message: "结束时间不能早于开始时间",
          type: "warning"
        });
        return;
      }
      // 获取的是  企业列表   下面的   企业列表
      this.$axios.post("/app/v1/platform/company/list", data).then(res => {
        this.tableData = [];
		console.log(res);
        if (res.data.message === "success.") {
          let response = res.data.data;
          this.tableData = response.list;
          this.totalNum = Number(response.totalnum);
          this.cpage = page ? Number(page) : 1;
        } else {
          // this.$message({
          //   message: "系统繁忙,请稍后重试",
          //   type: "error"
          // });
        }
      });
    },
    pageChange (p) {
      // 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
      // 然后把这个当前页数转换成字符串形式赋值给page，
      // 然后把page这个参数传给search这个方法
      let page = p.toString();
      this.search(page);
    },
    handleSizeChange (val) {
      this.formInline.pagesize = val;
      this.pageSize = val;
      this.search();
    },
    // 这个方法被注释了，并没有用到
    reset (formName) {
      this.$refs[formName].resetFields();
      this.formInline.startdate = this.formInline.enddate = "";
      this.getAuthority();
    },
    // 这个方法被一个传过来的参数 v-show了 ，暂时没有显示
    importData () {
      this.$axios({
        method: "post",
        url: "/app/v1/platform/statistic/companyListOut",
        data: this.formInline,
        responseType: "blob"
      })
        .then(res => {
          this.download(res);
        })
        .catch(error => {
          this.$message({
            message: "导出失败",
            type: "error"
          });
        });
    },
    download (res) {
      if (!res) {
        return;
      }
      let bob = new Blob([res.data]);
      let fileName = res.headers["content-disposition"].split("=")[1];
      fileName = decodeURI(fileName);
      let url = window.URL.createObjectURL(bob);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
    },
    // 选择城市
    handleCityChange (val) {
      this.formInline.citys = val;
      this.formInline.province = val[0];
      this.formInline.city = val[1];
      this.formInline.area = val[2];
    },
  }
};
</script>
<style scoped>
.formItemBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 20px;
}
.el-form-item {
  margin-bottom: 0;
}
.searchBtn {
  width: 140px;
}
.searchBox {
  padding: 0 30px;
}
.companyname {
  font-size: 14px;
}
</style>

